// Bootstrap + FontAwesome
@import "/bootstrap/bootstrap.less";
@import "/bootstrap/responsive.less";

// BxSlider
@import "../css/jquery.bxslider.css";

// Webfonts
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700);

// Colors
@brand: #e20613;
@brandLight: lighten(@brand, 20);

@innovaempleos: #F19324;

@complementary: spin(@brand, 210);
@complementaryDark: darken(@complementary, 20);
@complementaryDarker: darken(@complementary, 40);

@facebook-color: #3B5998;
@googlePlus-color: #C63D2D;
@linkedin-color: #4875B4;
@tumblr-color: #2B4964;
@twitter-color: #33CCFF;
@vimeo-color: #86B32D;
@youtube-color: #FF3333;

// Overrides
@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@linkColor: @brand;
@headingsFontWeight: normal;


// Styles

body {
	background: url(../img/noisy-texture.png);
}

// Barra de red innova
.innova-bar {
	.nav-tabs {
		margin-bottom: 0;
		border-bottom: none;
		
		> li {
			> a {
				background: transparent;
				border: none;
				.border-radius(0);

				&.icon-stack {
					width: 1em;
					height: 1em;
					line-height: 1em;
				}
			}

		}
		
		&.links > li {

			> a {
				font-size: .9em;
				&.innovaclub { color: @brand; }
				&.innovaempleos { color: @innovaempleos; }
				
				&:hover { 
					padding-top: 7px;
					background: none;
					border: none;
					border-top: 1px solid transparent;

					&.innovaclub { border-top-color: @brand; }
					&.innovaempleos { border-top-color: @innovaempleos; }
				}
			}

			&.active > a { 
				border-top: 1px solid transparent;
				color: @grayLight;
				border-top: 2px solid @brand;
				padding-top: 6px;
			}


		}

		&.social {
			margin-top: 5px;
		}

	}
}

.navbar {
	margin-bottom: 10px;

	.navbar-inner {
		background: none;
		box-shadow: none;
		border-bottom: none;
	}
	.brand {
		padding: 6px 20px;

		img { height: 28px; }
	}
	.btn-navbar { 
		background: @gray;
		&:hover { background: @grayDark; }
	}
	.nav li {
		a { 
			font-weight: normal; 
		}	 
		&.social {
			color: @grayLight;
			padding: 10px 15px 5px;
			
			a {
				padding: 0; 
				margin-bottom: 0px;
				display: inline-block;
				margin-left: 10px;
			}
		} 
	}
	.nav-collapse {
		&.in {
			border-top: 1px solid #ddd; 
			border-bottom: 1px solid #ddd; 
			background: #fff; 
		}
	}
	.divider {
		border-top: 1px solid #efefef;
	}
}


// Header
.masthead {
	padding: 1em 0 2em;

	.brand img{
		vertical-align: baseline;
		margin-bottom: -.2em;
		height: 2.5em;
	}

	.slogan {
		font-size: 1.2em;
		text-transform: uppercase;
		font-style: italic;
		font-weight: 100;
		color: @grayLight;

		margin-top: 10px;
		margin-left: 10px;
	}

	.nav {
		margin-bottom: 0;
		margin-top: 0.6em;
	}
}


.slider {
	list-style: none;
	margin: 0;

	li {
		display: none;
	}
	&.in li {
		display: block;
	}

	.slider-caption {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		#gradient > .horizontal-three-colors(rgba(0,0,0,.7), rgba(0,0,0,0), 100%, rgba(0,0,0,0));
		max-width: 40%;
		text-shadow: 0 2px 3px rgba(0,0,0,.9);

		padding: 30px 50px;

		font-size: @fontSizeLarge;
		color: #fff;

		h1, h2 {
			color: #fff;
			margin-top: 0;
			margin-bottom: .5em;
			line-height: 1.2;
		}
		p {
			line-height: 1.4;
			margin-bottom: 1em;
		}
	}
}


// Featured slide
.featured {
	margin-bottom: 0;
	padding: 0;

	.crsl-items {
		.clearfix();

		.crsl-item {
			.opacity(50);
			.transition(opacity .125s linear);

			&.crsl-active {
				.opacity(100);
			}
		}
		
		.carousel-caption {
			#gradient > .horizontal-three-colors(rgba(0,0,0,.7), rgba(0,0,0,0), 100%, rgba(0,0,0,0));
			top: 0;
			right: auto;
			max-width: 40%;
			text-shadow: 0 2px 3px rgba(0,0,0,.9);

			padding: 1.5em 2em;

			font-size: @fontSizeLarge;

			* { 
				// font-weight: 300; 
				color: #fff;
			}

			h1, h2 {
				margin-top: 0;
				margin-bottom: .5em;
				line-height: 1.2;
			}
			p {
				line-height: 1.4;
				margin-bottom: 1em;
			}
		}
	}

	.crsl-nav {
		display: block;
		position: relative;
		text-align: center;
		font-size: 2em;
		margin-top: -8em;
		
		a {
			display: inline-block;
			position: absolute;
			color: #fff;
			
			.icon-stack-base { color: #333; }

			&:hover {
				text-decoration: none;
				color: @brand;
			}
			&.previous {
				left: -1em;
			}
			&.next {
				right: -1em;
			}
		}
	}

	// .carousel {
	// 	margin-bottom: 0;

	// 	.carousel-caption {
	// 		right: auto;
	// 		bottom: auto;
	// 		top: 1em;

	// 		width: 40%;
	// 		max-height: 80%;

	// 		padding: 1.5rem;

	// 		font-size: @fontSizeLarge;
			
	// 		#translucent > .background(@complementaryDarker, .8);
	// 		.border-right-radius(@borderRadiusSmall);

	// 		* { 
	// 			font-weight: 300; 
	// 			color: #fff;
	// 		}

	// 		h1, h2 {
	// 			margin-top: 0;
	// 			margin-bottom: 1rem;
	// 			line-height: 1.2;
	// 		}
	// 		p {
	// 			line-height: 1.4;
	// 			margin-bottom: 1em;
	// 		}
	// 	}
	// 	.carousel-control {
	// 		background: none;
	// 		border: none;
	// 		color: @white;
			
	// 		top: 50%;
	// 		margin-top: -30px;

	// 		right: 100%;
	// 		left: auto;
	// 		margin-right: 1rem;

	// 		&.right {
	// 			left: 100%;
	// 			right: auto;
	// 			margin-left: 1rem;
	// 		}
	// 	}
	// }
}

section {
	// background: url(../img/section-deg.png) top left repeat-x;
	margin-bottom: 2em;
	padding: 1em 0;
	
	&.nobg {
		background: none;
	}

	
	h2,h3,h4 {
		margin-bottom: .5em;
		font-weight: 300;
		// font-style: italic;
		text-transform: uppercase;

		color: @gray;
	}

	.nav {
		margin-top: .5em;
		margin-bottom: 0;
	}
}

footer {
	background: #e5e5e5;
	border-top: 2px solid #ddd;
	color: @grayLight;

	margin-top: 4em;
	padding: 2em 0 4em;

	.header-icon {
		color: #ccc;
		.icon-stack-base { 
			color: #fff;
			text-shadow: 0 1px 1px rgba(0,0,0,.3);
		}
	}

	.nav {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		// padding: 1em 0;
		margin-bottom: 2em;

		> li > a {
			color: inherit;
		}
	}

	hr {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #eee;
	}

	.footer-map {
		img { 
			margin-bottom: 1em;
			.box-shadow(0 2px 5px rgba(0,0,0,.2)); 
		}
		p.lead {
			font-style: italic;
			text-shadow: 0 1px 0 rgba(255,255,255,.6);
		}
	}

	form {
		button {

		}
	}
}

// Social icons
a.social.icon-stack {
	text-decoration: none;
	color: @gray;

	.icon-stack-base { .transition(color .1s linear); }

	&:hover {
		&.facebook 		{ .icon-stack-base { color: @facebook-color; } }
		&.google		{ .icon-stack-base { color: @googlePlus-color; } }
		&.linkedin		{ .icon-stack-base { color: @linkedin-color; } }
		&.tumblr		{ .icon-stack-base { color: @tumblr-color; } }
		&.twitter		{ .icon-stack-base { color: @twitter-color; } }
		&.vimeo			{ .icon-stack-base { color: @vimeo-color; } }
		&.youtube		{ .icon-stack-base { color: @youtube-color; } }
	}
}

// UI Headers icons
.header-icon {
	width: 100%;
	text-align: center;
	font-size: 2em;

	margin-bottom: @baseFontSize;
}

// Cursos
.courses-cards {
	margin-top: 2em;

	.thumbnail {
		padding: 0;
		background: #fff;

		img {
			.border-top-radius(@baseBorderRadius - 1px);
		}

		.caption {
			padding: 0 1em .5em;

			h3, h4 {
				text-transform: none;
				line-height: 1.2em;
				font-weight: 300;
			}

			.meta {
				.clearfix();

				color: @grayLight;
			}
		}
	}
}


// Publicidades en listados de cursos
.courses-cards .thumbnail.ad {
	background: @gray;

	.caption {
		color: @grayLighter;
		text-align: center;
		padding: 1.5em 2em;
		.box-shadow(inset 0 0 80px rgba(0,0,0,.3));
		text-shadow: 0 1px 1px rgba(0,0,0,.7);

		h3 a {
			color: #fff;
		}
	}
}


// Vista de descripcion de curso

.course-header {
	height: 200px;
	margin-bottom: -130px;
	// -webkit-filter: blur(4px);
}

.course {
	background: none;
	// background: @complementaryDark url(../img/noisy-texture.png);
	
	// padding: 2em 0;

	// margin-bottom: 0;
	// border-top: 1px solid white;
	// border-bottom: 1px solid @complementaryDarker;

	.course-wrap {
		background: #fff;
		padding: 2em;
		border-top: 1px solid @complementary;
		.border-radius(5px);
		.box-shadow(0 3px 5px rgba(0,0,0,.2));
		position: relative;
		
		p, li { line-height: 1.8em; }
	
		h1, h2, h3 {
			font-weight: 300;
			text-transform: none;
		}

		h1 {
			margin: 0 2em .7em 0;
			line-height: 1.3em;
		}

		h2 { 
			margin: 1em 0 .5em;
		}
	}

	@media (max-width: 480px) {
		.course-wrap {
			margin-left: -20px;
			margin-right: -20px;
		}
	}

	.course-sidebar {
		.info-box {
			background: #fff;
			.box-shadow(0 3px 5px rgba(0,0,0,.2));
		}
	}
	
	.breadcrumb {
		background: none;
		padding: 0;

		a {
			color: @grayLight;
		}
	}
	
	.edition {
		position: absolute;
		.size(4.5em, 4em);
		top: -5px;
		right: 2em;

		background: @complementary;
		color: #fff;
		text-shadow: 0 1px 1px @complementaryDark;
		
		.box-shadow(0px 5px 10px fadeout(@complementaryDark, 70%));

		.border-top-left-radius(3px);
		font-size: @baseFontSize;
		text-align: center;

		em {
			display: block;
			
			font-size: 2em;
			line-height: 1;
			font-style: normal;
			font-weight: 100;
			margin-top: .3em;
		}	

		&:before,
		&:after {
			content: '';
			position: absolute;
		}
		
		&:before {
			top: 0px;
			left: 100%;
			border-left: 5px solid @complementaryDark;
			border-top: 5px solid transparent;
		}

		&:after {
			border-top: 1em solid @complementary;
			border-right: 2em solid transparent;
			border-left: 2em solid transparent;
			top: 100%;
			left: 0;
		}
	}

	.img-wrap {
		margin: 1em -2em 2em;
	}
}

// .course-header {
// 	// position: relative;

// 	h1 {
// 		// padding: 0;
// 		// margin: 0;
// 	}
		

// }

// .course-body {
// }


.call-to-action {
	display: block;
	width: 90%;
	margin: 1em 5%;
	padding: 1em;
	.box-sizing(border-box);
	// text-transform: uppercase;
}


// Sidebar 
.course-sidebar {
// 	position: absolute;
}

// 	@media (max-width: 767px) {
// 		.course-sidebar { position: static; }
// 	}

.info-box {
	border: 1px solid @grayLighter;
	padding: 1em 1.5em;
	margin-bottom: 3em;
	background: #fff;

	.border-radius(2px);

	// .box-shadow(0 3px 10px fadeout(@complementaryDark, 80%));

	.box-head {
		font-size: 2em;
		margin-top: -1em;
		margin-bottom: 5px;
		line-height: 2em;
		height: 2em;
		text-align: center;
		// outline: 1px solid red;
		
		span {
			display: inline-block;
			width: 1.5em;
			height: 1.5em;
			line-height: 1.5em;
			background: #fff;
			border: 2px solid @grayLighter;
			.border-radius(50%);

			i {
				color: @grayLight;
			}
		}

		img {
			height: 2em;
			.border-radius(50%);
			vertical-align: baseline;
			border: 2px solid @grayLighter;
		}
	}

	.section {
		border-top: 1px solid @grayLighter;
		margin: 0.5em -1.5em 0;
		padding: 0.5em 1em 0;

		&:first-of-type{
			padding-top: 0;
			border-top: none;
		}
	}

	&.indicator-left,
	&.indicator-right {
		position: relative;

		&:before,
		&:after {
			content: '';
			display: block;
			position: absolute;

			width: 0; 
			height: 0; 
			top: 30px;
			left: -15px;

			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
			
			border-right: 15px solid @grayLighter;
		}
		&:after {
			border-right-color: #fff;

			left: -10px; 
		}
	}
	&.indicator-right {
		&:before,
		&:after {
			left: auto;
			right: -15px;
			border-right: none;
			border-left: 15px solid @grayLighter;
		}
		&:after {
			right: -10px;
			border-left-color: #fff;
		}
	}
}

	@media (max-width: 767px) {
		.course-sidebar { padding-top: 3em; }
	}

.course-details {
}

.course-teachers {
	padding-top: 2em;
	padding-bottom: 2em;

	.teacher {
		display: block;
		margin-bottom: 1em;

		img { 
			display: block; 
			margin: 0 auto;
			max-width: 100px;
			.border-radius(100%);
			.box-shadow(0px 2px 1px @grayLight);
		}
	}
}

.modal-teacher {
	.modal-body { padding: 2em; }
	button.close { 
		position: absolute; 
		top: 20px;
		right: 20px;
		z-index: 1;
	}
}

	@media (max-width: 767px) {
		.course-teachers a.teacher {
			display: inline-block;
			margin-right: 2em;
		}
	}
	@media (max-width: 480px) {
		.course-teachers .teacher {
			display: block;
			margin-right: auto;

			img { display: inline-block; }
		}
	}

.endorsements {
	.carousel {
		margin: 0;
	}

	blockquote {
		margin: 0 0 1em;
		padding: 0;
		border: none;

		p {
			font-style: italic;
		}
		small {
			text-align: right;
		}
	}

	&.featured-endorsements {
		.icon-stack-base {
			color: @grayLight;
		}
		blockquote {
			margin-bottom: 2em;
		}
	}
}

.results-filter {
	.nav-list {
		margin: 0 -1.5em;

		li {
			a {
				padding: 5px 15px;
				color: @gray;

				.badge { 
					float: right;
					font-weight: normal;
					background: @grayLighter;
					color: @grayLight
				}
			}
			&.active a {
				color: #fff;

				.badge {
					background: transparent;
					color: #fff;
				}
			}
		}
	}
}

.search-results {

	.courses-cards {
		margin-top: 0;
	}
}

.top-fold {
	position: relative;
	background: none;

	border-top: 1px dashed #eee;

	&:before {
		content: '';
		display: block;
		width: 100%;
		height: 20px;

		position: absolute;
		top: 0;
		left: 0;

		#gradient > .vertical(rgba(255,255,255,.0), rgba(255,255,255,.3));
		box-shadow: 0 -10px 20px rgba(0,0,0,.04);
	}
	// &:after {
	// 	content: '';
	// 	display: block;
	// 	width: 100%;
	// 	height: 0px;

	// 	position: absolute;
	// 	bottom: 100%;
	// 	left: 0;
	// 	margin-bottom: -30px; 

	// 	border-width: 30px 5px;
	// 	border-style: solid;
	// 	border-color: transparent #aaa;
	// 	.box-sizing(border-box);
	// }
}

.text-center { text-align: center; }

section.about {
	p {
		line-height: 1.8;
	}
	hr {
		margin: 4em auto;
		width: 20%;
		border-top-color: #ddd;
	}
}

.links-list {
	list-style: none;
	margin-left: 0;
	margin-bottom: 1.5em;

	> li {
		margin-bottom: .4em;

		> a {
			display: block;
		}
	}
}

// Ventanas modales
@media (min-height: 600px) {
	.modal-body {
		max-height: 500px;
	}
}